import React, { Component } from 'react';
import { Form, Icon, Input, Button, Checkbox, Card, Row, Col } from 'antd';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import { login } from '../../actions/user';
import './login.less';
const mapStateToProps = state => ({
  isLoading: state.User.isLoading,
  isLogin: state.User.isLogin
});
@connect(mapStateToProps, { login })
@Form.create()
class Login extends Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
        this.props.login(values);
      }
    });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    return this.props.isLogin ? (
      <Redirect to="/" />
    ) : (
      <Card title="自在admin" className="j-login">
        <Form onSubmit={this.handleSubmit} className="login-form">
          <Form.Item>
            {getFieldDecorator('username', {
              rules: [
                { required: true, message: 'Please input your username!' }
              ]
            })(
              <Input
                disabled={this.props.isLoading}
                prefix={
                  <Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />
                }
                placeholder="用户名"
              />
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('password', {
              rules: [
                { required: true, message: 'Please input your Password!' }
              ]
            })(
              <Input
                disabled={this.props.isLoading}
                prefix={
                  <Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />
                }
                type="password"
                placeholder="密码"
              />
            )}
          </Form.Item>
          <Form.Item>
            <Row>
              <Col span={24}>
                {getFieldDecorator('remember', {
                  valuePropName: 'checked',
                  initialValue: true
                })(<Checkbox disabled={this.props.isLoading}>记住我</Checkbox>)}
              </Col>
              <Col span={24}>
                <Button
                  loading={this.props.isLoading}
                  type="primary"
                  htmlType="submit"
                  className="login-form-button"
                >
                  登 录
                </Button>
              </Col>
              <Col span={24}>
                <div
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between'
                  }}
                >
                  <a className="login-form-forgot" href="#">
                    忘记密码?
                  </a>
                  <a href="#">立即注册!</a>
                </div>
              </Col>
            </Row>
          </Form.Item>
        </Form>
      </Card>
    );
  }
}
export default Login;
